<template>
    <div class="page register">
        <nav-bar title="注册" @click-left="$router.back()"></nav-bar>
        <div class="login_con">
            <login-form :formConfig="formConfig" @submit="formSubmit" ref="loginForm" type="1">
                <template v-slot:other>
                    <div class="form_sort">
                        <div class="flex_start">
                            <checkbox v-model="checked"></checkbox>
                            <div class="start">
                                <span>阅读并同意一下协议</span>
                                <span class="high_light" @click="navPushTo('/404')">《瞎编协瞎编协议议》</span>
                                <span>和</span>
                                <span class="high_light" @click="navPushTo('/404')">《瞎编协议》</span>
                            </div>
                        </div>
                    </div>
                </template>
            </login-form>
        </div>
    </div>
</template>

<script>

import LoginForm from "@/components/form/login-form";
import { Checkbox } from 'vant';
import { mapState, mapMutations } from 'vuex'

const FormConfig = {
    tell: {
        lable: "手机号",
        placeholder: "请输入手机号"
    },
    code: {
        lable: "验证码",
        placeholder: "请输入验证码"
    },
    pwd: {
        lable: "新密码",
        placeholder: "请输入密码"
    },
    conformPwd: {
        lable: "确认密码",
        placeholder: "再次输入密码"
    },
    inviterCode: {
        lable: "邀请码",
        placeholder: "请输入邀请码"
    },
    butt: {
        text: "立即注册"
    }
}

export default {

    name: "register",

    components: { LoginForm, Checkbox },

    data() {
        return {
            formConfig: FormConfig,
            checked: false,
        }
    },

    provide: function () {
        return {
            sendCode: this.sendCode
        }
    },


    computed: {
        ...mapState({
            userInfo: state => state.userInfo,
        })
    },

    methods: {
        ...mapMutations({
            setUserInfo: "setUserInfo",
        }),

        // 跳转到
        navPushTo(path) {
            this.$router.push(path);
        },

        // 发送验证码
        sendCode() {
            let _mobilePhone = this.$refs.loginForm.mobilePhone;
            if (this.$check.start(_mobilePhone, "手机号").isNull().isTell().endShow()) {
                return Promise.resolve(false);
            }
            let params = {
                mobilePhone: _mobilePhone
            }
            return this.$http.smsRegister(params);
        },

        // 登录
        formSubmit(e) {
            if (!this.checked) {
                this.$toast("请阅读并同意协议!");
                return;
            }
            const { mobilePhone, smsCode, password, invitationCode } = e;
            let params = {
                mobilePhone: mobilePhone,
                smsCode: smsCode,
                password: password,
                confirmPassword: password,
                invitationCode: invitationCode,
                userType: "MERCHANT", // MERCHANT：商户，AGENT_B：B类服务商
            }
            this.$http.userRegister(params).then(respData => {
                if (respData === false) {
                    return;
                }
                this.$router.replace("/login");
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.login_con {
    width: 100%;
    padding: 20px 0;
    .form_sort {
        font-size: 12px;
        color: #666;
        padding: 10px 10px 40px 10px;
        .high_light {
            color: #3373f9;
        }
        .start {
            margin-left: 10px;
        }

        /deep/ .van-checkbox {
            padding: 6px;
        }
    }
}
</style>